<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">日志审计&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                API调用日志
            </span>
            </Col>
        </Row>
        <Row type="flex" justify="start" style="margin-bottom: 20px;">
            <Col span="4"> 
                <div class="search_items">
                    <div style="float:left;">API名称:</div>
                    <div class="search_ipt">
                        <Input v-model="condition.apiName" />
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="search_items">
                    <div style="float:left;">IP地址:</div>
                    <div class="search_ipt">
                        <Input v-model="condition.ip" />
                    </div>
                </div>
            </Col>
            <Col span="4">
                <div class="search_items">
                    <div style="float:left;">接入者名称:</div>
                    <div class="search_ipt">
                        <Input v-model="condition.userName" />
                    </div>
                </div>
            </Col>
            <Col span="6">
                <div class="search_items">
                    <div style="float:left;">接入KEY:</div>
                    <div class="search_ipt">
                        <Input v-model="condition.key" />
                    </div>
                </div>    
            </Col>
            <Col span="6">
                <div class="search_items" style="margin-right: 0;">
                    <div style="float:left;">调用结果:</div>
                    <div class="search_ipt">
                        <Select v-model="logtype">
                            <Option v-for="(item,index) in resultList" :value="item.value" :key="index">{{item.label}}</Option>
                        </Select>
                    </div>
                    <div style="float:left;margin-left: 10px;">
                        <Button type="primary" @click="handleSearch">
                        <Icon type="ios-search" /></Button>
                    </div>
                </div>
            </Col>
        </Row>
        <Table :columns="httpColumns" :data="httpData"></Table>
        <div style="float: right; margin-top: 15px">
            <Page 
            :total="dataCount" 
            :page-size="pageSize" 
            show-total 
            class="paging" 
            @on-change="changepage" 
            @on-page-size-change="pages" 
            show-elevator 
            show-sizer 
            show-total></Page>
        </div>
    </div>
    </div>
</template>
<style scoped>
.search_items{
    display:flex;
    -webkit-display:flex;
    align-items: center;
    -webkit-align-items: center;
    margin-right: 10px;
}
.search_items .search_ipt{
    flex:1;
    -webkit-flex:1;
    margin-left:5px;
}
</style>
<script>
import { mapState, mapActions } from 'vuex'
import zmitiUtil from '../../lib/util'

    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                result:'',
                resultList:[
                    {
                        value:'',
                        label:'全部'
                    },
                    {
                        value:1,
                        label:'成功'
                    },
                    {
                        value:0,
                        label:'失败'
                    },
                ],
                dataCount: 0,
                pageSize: 10,
                ajaxHttpData: [],
                xia: 0,
                httpColumns: [                    
                    {
                        title: '接口名称',
                        key: 'apiName',
                        align: 'center',
                        render:(h,params)=>{                            
                            return h('div',{
                                style:{
                                    color:'#2d8cf0',
                                    cursor:'pointer'
                                },
                                on:{
                                    click:()=>{
                                        this.toViewapi(params.row.apiName)                                        
                                    }
                                }
                            },params.row.apiName)
                        }
                    },
                    {
                        title: '接入者名称',
                        key: 'userName',
                        align: 'center'
                    },
                    {
                        title: '访问IP',
                        key: 'ip',
                        align: 'center'
                    },
                    {
                        title: 'API KEY',
                        key: 'apiKey',
                        align: 'center'
                    },
                    {
                        title: '调用时间',
                        key: 'date',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',{},zmitiUtil.DateCn(params.row.date))
                        }
                    },
                    {
                        title: '调用结果',
                        key: 'success',
                        align: 'center',
                        render:(h,params)=>{
                            let resultstr=params.row.success==true?'成功':'失败'
                            return h('div',{
                                style: {
                                    color:params.row.success==true?'#19be6b':'#ff0000'
                                },
                            },resultstr)
                        }
                    }
                ],
                httpData: [],
                condition:{
                    apiName:'',
                    userName:'',
                    key:'',
                    ip:'',
                    success:'',
                    pageNO:1,
                    pageSize:10
                },
                logtype:'',
            }
        },
        mounted() {
            this.getDataList();
        },
        watch:{
            logtype(newVal,oldVal){
                if(newVal==1){
                    this.condition.success=true; 
                }else if(newVal==0){
                    this.condition.success=false;
                }else{
                    this.condition.success='';
                }
            }
        },
        methods: {
            getDataList(){//列出所有的
                var _this = this;                
                var path='log/apilog/list';
                var postData = _this.condition;
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = JSON.parse(res.data);
                    //let resObj=JSON.parse(res.data);
                    console.log(data,'data')
                    if(data.total>0){
                        _this.httpData = data.results;
                        _this.dataCount=data.total
                    }else{
                        _this.httpData=[];
                        _this.dataCount=0;
                    }
                    
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            // 获取翻页列表
            changepage(index) {
                var _this = this;
                //index当前页码
                console.log('index = ' + index)
                _this.condition.pageNO=index;
                _this.getDataList();           
            },
            handleSearch(){
                var _this = this;
                _this.condition.pageNO=1;
                _this.getDataList();
            },
            pages(num) { //修改每页显示条数时调用
                this.condition.pageSize = num;
                this.condition.pageNO=1;
                setTimeout(()=>{
                    this.getDataList();
                },300)                
            },
            toViewapi(apiName){//前往API接口详情
                var _this = this;                
                var path='apiweb/view';
                var postData = {
                    name:apiName
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;
                    if(res.data.id){
                        _this.$router.push({ 
                            name: 'ViewAPI', 
                            params: { 
                                id:res.data.id,
                                status:0 
                            } 
                        })
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            }

        },
        created() {
            // this.handleListApproveHttp();
        }
    }
</script>